<template>
  <div class="login">
    <el-form :model="myform" class="from">
       <h3>WELCOME</h3>
      <el-form-item  label-width="60px" prop="name">
        <el-input v-model="myform.name"></el-input>
      </el-form-item>
      <el-form-item  label-width="60px" prop="pwd">
        <el-input v-model="myform.pwd"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="fndebounce">登录</el-button>
      </el-form-item>
      <el-form-item>
          <span>注册证号|忘记密码</span>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import instance from "../api";
import debounce from "../plugin/debounce";
export default {
  name: "Login",
  data() {
    return {
      myform: {
        name: "admin",
        pwd: "123456",
      },
      rules: {
        //根据prop的值正则验证
        name: [
          {
            required: true,
            message: "输入有误哦",
            trigger: "blur",
            pattern: /123456/,
          },
        ],
        pwd: [
          {
            validator: (rule, value, cb) => {
              //自定义校验
              console.log(rule);
              console.log(value);
              console.log(cb);
              let reg = /^(123)\w(456)$/;
              let a = reg.test(value);
              if (a) {
                return cb();
              } else {
                return cb(new Error()); //返回的执行cb()表示通过，返回执行cb(new Error('没通过'))
              }
            },
            message: "验证没有通过",
            trigger: "blur", //什么时候触发校验规则 blur失去焦点
          },
        ],
      },
    };
  },
  created() {
    this.fnajax = debounce(this.fnsubmit); //业务函数防抖封装
  },
  methods: {
    fndebounce() {
      //防抖封装
      this.fnajax();
    },
    async fnsubmit() {
      let name = this.myform.name;
      let pwd = this.myform.pwd;
      console.log(name, pwd);
      let { data } = await instance.get("/users", { params: { name, pwd } });
      let toKen = data[0].toKen;
      localStorage.setItem("toKen", toKen);
      console.log(data);
      if (data.length > 0) {
        this.$message({
          message: "恭喜你，这是一条成功消息",
          type: "success",
          duration: 1000,
          onClose: () => {
            // alert("====")
            this.$router.push({name:"Home"});
          },
        });
      }
    },
  },
};
</script>
<style scoped>
.login {
  width:100%;
  height:1000px;
  margin:0 auto ;
  background-image :url(./img/bg.jpg);
  position:relative
}
.login .from{
  width: 300px;
  height:300px;
  margin: 0 auto ;
  /* padding: 100px 0 0 0 ; */
  background-color:rgba(0,0,0,0.5);
  position:absolute;
  top:350px;
  left:800px;
}
.login .from H3{
  color: #fff;
}
.login .from span{
  color:#fff;
}
</style>